// HelpCenterPage.tsx
import React, { useState } from 'react';
import {WeiboCircleOutlined,WechatOutlined} from '@ant-design/icons';
import './Asked.css';
interface FAQCategory {
  title: string;
  items: { title: string; link?: string }[];
}

const FreAsked: React.FC = () => {
  // 状态管理展开/收起
  const [activeCategory, setActiveCategory] = useState<string | null>('特殊说明');

  // FAQ数据
  const faqCategories: FAQCategory[] = [
    {
      title: '特殊说明',
      items: [
        // { title: '商用授权', link: '#' },
        // { title: '个人VIP企业VIP管什么区别？', link: '#' },
        // { title: '注册、登录', link: '#' },
        // { title: '什么是商用？', link: '#' }
      ]
    },
    {
      title: '商用授权',
      items: [
         { title: '商用授权dddd', link: '#' },
        { title: '个人VIP企业VIPddddd管什么区别？', link: '#' },
        { title: '注册、登ddddd录', link: '#' },
        { title: '什么是商ddd用？', link: '#' }
      ]
    },
    {
      title: '注册、登录',
      items: [
        { title: '包图网企业VIP版权的保障？', link: '#' },
        { title: '充值、退款', link: '#' }
      ]
    },
    {
      title: '下载',
      items: []
    },
    {
      title: '票据',
      items: [
        { title: '网站下载的素材可以商用吗？', link: '#' }
      ]
    },
    {
      title: '充值、退款',
      items: []
    },
    {
      title: '软件常见问题',
      items: []
    },
    {
      title: '网站问题',
      items: []
    },
     {
      title: '设计师签约',
      items: []
    }
  ];
    // 使用useState来跟踪当前激活的菜单项索引
  // const [activeIndex, setActiveIndex] = useState<number | null>(null);

  // 处理菜单项点击事件
  // const handleItemClick = (index: number) => {
  //   setActiveIndex(activeIndex === index ? null : index);
  // };

  return (
    <div className="help-center-container">
      {/* 头部导航 */}
      <header className="header">
        <div className="logo">
          <img src="/src/assets/acimg/logo1.png" alt="包图网" className='logoImg' />
          <p className='help'><sub className='dd'>·</sub>帮助中心</p>
        </div>
        <nav className="nav-links">
          <a className='asked'>常见问题</a>
          <a>客服中心</a>
          <a>返回首页</a>
        </nav>

      </header>
      {/* 搜索区 */}
      <div className='search'>
<div className="search-box">
        <input
          type="text"
          placeholder="请输入关键词，如：发票"
        />
        <button type="submit">搜索</button>
      </div>
      </div>
      

      {/* 主内容区 */}
      <main className="accordion-container">
        <div className="sidebar">
      
            {faqCategories.map((category,index) => (
              <div key={index}>
                <div
                  className={`category-item ${activeCategory === category.title ? 'active' : ''}`}
                  onClick={() => setActiveCategory(activeCategory === category.title ? null : category.title)}
                >
                  {category.title}       
                 
                </div>
                {category.items.length > 0 && activeCategory === category.title && (
                  <div className="submenu">
                    {category.items.map((item) => (
                      <div key={item.title} className="submenu-item">
                        <a href={item.link}>{item.title}</a>
                      </div>
                    ))}
                  </div>
                )}
              </div>

          //     <div
          //   key={index}
          //   className="accordion-item"
          //   onClick={() => handleItemClick(index)}
          // >
          //   <div className="item-header">
          //     <span className="expand-icon">{activeIndex === index ? '-' : '+'}</span>
          //     <span className="item-title">{category.title}</span>
          //   </div>


          // </div>
   
            ))}
         


        </div>

        <div className="content-area">
          {/* <nav>
    {faqCategories.map((category) => (
<div
                  className={`category-item ${activeCategory === category.title ? 'active' : ''}`}
                  onClick={() => setActiveCategory(activeCategory === category.title ? null : category.title)}
                >
                  {category.title}       
                  <FaChevronRight className="arrow-icon" />
                </div>
    ))

              }
          </nav> */}
          {/* 这里是内容显示区域 */}
        
          <div className="content-placeholder">
              <div className='headerText'>
            {activeCategory} 
          </div> 
             <p>
              企业VIP可以全站下载包图网原创可商用的素材，hhhhhhhh
              且可以作为商业用途。
              包图企业VIP服务包含最高200000元的版权纠纷保险服务
              <br></br>
              ，专业法律顾问版权纠纷处理服务，尊享专属版权字体ggggggg
              fdsfsd
              fgr
              btht
              ，畅享包图网所有分类素材海量下载等。
                企业VIP可以全站下载包图网原创可商用的素材，hhhhhhhh
              且可以作为商业用途。
              包图企业VIP服务包含最高200000元的版权纠纷保险服务
              <br></br>
              ，专业法律顾问版权纠纷处理服务，尊享专属版权字体ggggggg
              fdsfsd
              fgr
              btht
              ，畅享包图网所有分类素材海量下载等。
            </p>
          </div>
        </div>
      </main>

      {/* 底部信息 */}
      <footer className="footer">
        <div className='bai'>
      <div className="customer-service-container">
  <div className="service-item">
    <div className="icon-wrapper">
      <img src="/src/assets/acimg/x1.png" alt="" />
      {/* <img src="chat-icon.png" alt="在线客服图标"> */}
    </div>
    <div className="text-wrapper">
      <h3>在线客服</h3>
      <p>人工服务时间: 9:30-18:30</p>
      <a href="#" className="consult-link">我要咨询{">>"}</a>
    </div>
  </div>

  <div className="service-item">
    <div className="icon-wrapper">
      <img src="/src/assets/acimg/x2.png" alt="" />
    </div>
    <div className="text-wrapper">
      <h3>电话客服</h3>
      <p>服务时间: 工作日9:00-18:00</p>
      <span>热线电话: 021-31770313</span>
    </div>
  </div>
  <div className="service-item">
    <div className="icon-wrapper">
    <img src="/src/assets/acimg/x3.png" alt="" />
    </div>
    <div className="text-wrapper">
      <h3>企业VIP咨询</h3>
      <p>人工服务时间: 9:30-18:30</p>
      <a href="#" className="consult-link">我要咨询{">>"}</a>
    </div>
  </div>
  <div className="service-item">
    <div className="icon-wrapper">
         <img src="/src/assets/acimg/x4.png" alt="" />
    </div>
    <div className="text-wrapper">
      <h3>提建议</h3>
      <p>欢迎提出对产品的想法/建议</p>
      <a href="#" className="feedback-link">我要反馈{">>"}</a>
    </div>
  </div>
</div>
<div className='tt' >
  <ul>
    <li>全站精品</li>
    <li>放心下载</li>
    <li>商用无忧</li>
    <li>正版版权</li>
    <li>海量素材</li>
    <li>优质服务</li>
  </ul>
</div>
</div>
<div className='max-footer'>

        <div className="footer-links">
           <div className="Footerlogo">
          <img src="/src/assets/acimg/logo1.png" alt="包图网" className='footerImg' />
           </div>
           <div className='ttLog'>
          <a href="#">今日新图</a>
          <a href="">热门专题</a>
          <a href="#">设计图片</a>
          <a href="#">售后服务</a>
          <a href="#">关于我们</a>
          <a href="#">联系我们</a>
          <a href="#">加入我们</a>
          <a href="#">帮助中心</a>
          <a href="#">在线客服</a>
          <a href="#">
           <WechatOutlined />
          </a>
          <a href="#">
            <WeiboCircleOutlined />
            </a> 
           </div>
        
        </div>
        <div className="copyright">
          © 2024 包图网 版权所有
          <br />
          沪ICP备14019833号-2
        </div>
        </div>
      </footer>
    </div>
  );
};

export default FreAsked;